import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Statistic, Card, Row, Col } from 'antd';
import { ArrowUpOutlined, ArrowDownOutlined, FrownOutlined, SmileOutlined, SolutionOutlined } from '@ant-design/icons';

// 引入自定义操作
import { UserinfoChangeWorkerTaskDataSaga } from '../../../../redux/actions/userinfo';

class DataShow extends Component {

    componentDidMount() {
        const {UserinfoChangeWorkerTaskDataSaga, baseUserInfoState} = this.props
        const obj = {
            email: baseUserInfoState.email,
            username: baseUserInfoState.username
        }
        UserinfoChangeWorkerTaskDataSaga(obj)
    }


    render() {
        const { baseUserInfoState, workerTaskDataState } = this.props
        return (
            <div className="site-statistic-demo-card">
                <Row gutter={16}>
                    {/* <Col span={12}>
                    <Card>
                        <Statistic
                        title="任务成功率"
                        value={ baseUserInfoState.tasks_num === 0 ? 0 : baseUserInfoState.success_task_num / baseUserInfoState.tasks_num }
                        precision={2}
                        valueStyle={{ color: '#3f8600' }}
                        prefix={<SmileOutlined />}
                        suffix="%"
                        />
                    </Card>
                    </Col>
                    <Col span={12}>
                    <Card>
                        <Statistic
                        title="任务失败率"
                        value={ baseUserInfoState.tasks_num === 0 ? 0 :baseUserInfoState.fail_task_num / baseUserInfoState.tasks_num }
                        precision={2}
                        valueStyle={{ color: '#cf1322' }}
                        prefix={<FrownOutlined />}
                        suffix="%"
                        />
                    </Card>
                    </Col> */}
                    <Col span={8}>
                    <Card>
                        <Statistic
                        title="已完成"
                        value={workerTaskDataState.completed_num}
                        precision={0}
                        valueStyle={{ color: '#3f8600' }}
                        // prefix={<ArrowDownOutlined />}
                        />
                    </Card>
                    </Col>
                    <Col span={8}>
                    <Card>
                        <Statistic
                        title="开发中"
                        value={workerTaskDataState.dev_num}
                        precision={0}
                        valueStyle={{ color: '#1890ff' }}
                        // prefix={<ArrowDownOutlined />}
                        />
                    </Card>
                    </Col>
                    <Col span={8}>
                    <Card>
                        <Statistic
                        title="未开始"
                        value={workerTaskDataState.no_start}
                        precision={0}
                        valueStyle={{ color: '#cf1322' }}
                        // prefix={<ArrowDownOutlined />}
                        />
                    </Card>
                    </Col>    
                </Row>
            </div>
        );
    }
}

export default connect (
    state => ({
        baseUserInfoState: state.PublicReducer.baseUserInfo,
        workerTaskDataState: state.UserInfoReducer.workerTaskData,
    }),
    {
        UserinfoChangeWorkerTaskDataSaga,
    }
)(DataShow)
